
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="rongself">
    <link rel="icon" href="../../favicon.ico">

    <title>伽马星匿名聊天室</title>

    <!-- Bootstrap core CSS -->
    <link href="/javascripts/twitter/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link rel='stylesheet' href='/stylesheets/style.css' />

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="/javascripts/socket.io-client/socket.io.js"></script>
    <script src='/javascripts/jquery/dist/jquery.min.js'></script>
</head>

<body>

<!-- Begin page content -->
<div class="container" style="padding-top: 2rem;">
    <div class="row">
        <div class="col-lg-12" id="messages" style="font-size: 12px;">
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <form class="form-horizontal" id="chat_form" role="form">
                    <div class="form-group">
                        <div class="col-lg-12">
                            <div class="input-group">
                                <input type="text" id="m" class="form-control">
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="submit">发射</button>
                                  </span>
                            </div>
                            <!-- /input-group -->
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script>
    var chat = function (){
        var self = this;
        var socket = io();
        var chatName = prompt("你是谁","");
        chatName = chatName?chatName:'拉屎星人';
        socket.emit('online',chatName);
        $('#m').focus();
        var message = function(name,content,time){
            this.name = name;
            this.content = content;
            this.time = time?time:new Date();
        }
        self.showMessage = function(msg,type){
            $('#messages').append($('<div class="alert alert-'+type+' chat-message" role="alert">').html(msg));
            $('html, body').stop(true,true).animate({
                scrollTop: $('body').outerHeight()+60-$(window).height()
            }, 100);
        }
        self.htmlFilter = function(string){
            return $('<p>'+string+'</p>').text();
        }
        $('#chat_form').submit(function(){
            var msg = new message(chatName,$('#m').val(),null);
            if(msg.content!=''){
                socket.emit('message_send',msg);
                $('#m').val('');
            }else{
                alert('不能发送空消息你这逗比');
            }
            return false;
        });
        socket.on('message_send',function(msg){
            self.showMessage('<strong>'+self.htmlFilter(msg.name)+'</strong>(' +self.htmlFilter(msg.time)+ ') : '+self.htmlFilter(msg.content),'info');
        });
        socket.on('online',function(username){
            self.showMessage('<strong>'+self.htmlFilter(username)+'</strong>'+ ' 上线','success');
        });
        socket.on('offline',function(username){
            self.showMessage('<strong>'+self.htmlFilter(username)+'</strong>'+'下线','danger');
        });
        socket.on('reconnect',function(){
            socket.emit('online',chatName);
        });
    }();
</script>
</body>
</html>

